<script setup lang="ts">
import { ref } from 'vue'
import { doPutOrderVerification } from '@/apis/order'
import { useStoreInfoStore } from '@/store/modules/storeInfo'

const code = ref('')
const $useStoreInfoStore = useStoreInfoStore()

const handleConform = () => {
    if (!code.value.length) return uni.$msg('请输入核销码')
    orderVerification(code.value)
}

async function orderVerification(cd: string) {
    const { code: state, data, msg } = await doPutOrderVerification({ code: cd, storeId: $useStoreInfoStore.storeId })
    if (state !== 200) return uni.$msg(msg ? msg : '门店订单核销失败')
    uni.$msg('订单核销成功')
    code.value = ''
}
</script>

<template>
    <view class="code">
        <view class="code__title">输入核销码</view>
        <view class="code__compose">
            <u-input v-model.trim="code" type="number" class="code__compose--input" placeholder="请输入核销码" size="large" maxlength="10" />
            <view class="code__compose--confirm" @click="handleConform">确认</view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(code) {
    width: 712rpx;
    height: 414rpx;
    margin: 0 auto;
    background: #fff;
    padding: 80rpx 0 0 0;
    margin-top: 24rpx;
    border-radius: 12rpx;
    @include e(title) {
        width: 260rpx;
        text-align: center;
        font-size: 32rpx;
        color: #333333;
        margin: 0 auto 48rpx;
    }
    @include e(compose) {
        margin: 0 auto;
        display: flex;
        align-items: center;
        width: 506rpx;
        border: 1px solid #4755e9;
        border-radius: 14rpx;
        padding-left: 30rpx;
        @include m(input) {
            width: 400rpx;
            font-size: 28rpx;
            color: #333333;
        }
        @include m(confirm) {
            width: 106rpx;
            height: 106rpx;
            background: #4755e9;
            font-size: 28rpx;
            color: #fff;
            text-align: center;
            line-height: 106rpx;
            border-radius: 0px 10rpx 10rpx 0px;
        }
    }
}
</style>
